<template>
  <div class="project">
    <!-- 产品  -->
    <div class="wrapper">
      <div class="wb_header">
        <div>产品列表</div>
      </div>
      <div class="warp warp1">
        <el-form :inline="true" :model="queryFrom" class="demo-form-inline">
          <el-form-item label="">
            <el-input placeholder="请输入内容" suffix-icon="el-icon-search" v-model="queryFrom.input1"></el-input>
          </el-form-item> 
          <el-form-item>
            <el-radio-group v-model="queryFrom.radio"  size="small">
              <el-radio-button label="全部"></el-radio-button>
              <el-radio-button label="普适型品类"></el-radio-button>
              <el-radio-button label="综合型品类"></el-radio-button>
              <el-radio-button label="检测辅助设备"></el-radio-button>
            </el-radio-group>
          </el-form-item>
        </el-form> 
        <el-table v-loading="loading" :data="configList">  
          <el-table-column label="产品名称" sortable align="center" prop="name" />
          <el-table-column label="标识符" width="120" align="center" prop="identifier" :show-overflow-tooltip="true" />
          <el-table-column label="所属分类" align="center" prop="productTypeId" :show-overflow-tooltip="true" />
          <el-table-column label="节点类型" align="center" prop="nodeType" :show-overflow-tooltip="true" />
          <el-table-column label="数据格式" align="center" prop="dataFormat" :show-overflow-tooltip="true" /> 
          <el-table-column label="传输协议" align="center" prop="protocolType" :show-overflow-tooltip="true" /> 
          <el-table-column label="在线率" width="100" align="center" prop="autoOnline" :show-overflow-tooltip="true" /> 
          <el-table-column label="描述" width="180" align="center" prop="remark" :show-overflow-tooltip="true" />  
          <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
            <!-- <template slot-scope="scope"> -->
            <template> 
              <el-button size="mini" type="text">查看</el-button>  
            </template>
          </el-table-column>
        </el-table> 
        <div class="footer">
          <div> 
            <el-button type="primary">在线率导出</el-button>
          </div>
          <pagination v-show="total>0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize" @pagination="getList" />
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
data() {
  return {
    queryFrom: {
      radio: "全部"
    },
    loading: false,
    configList: [
        { "id": 1, "name": "视频监控摄像机sher", "identifier": "sher", "productTypeId": "监测辅助设备", "nodeType": "其他", "dataFormat": "binary", "protocolType": "mqtt", "autoOnline": 1, "remark": "", "createTime": "2020-11-19 21:43:19", "updateTime": "2022-03-30 11:17:21", "params": {}, "isPublish": 0, "registerCode": "FJ0slCf5", "secret": "OfPIVY2n", "key": "FJ0slCf6", "imagePath": "", "manualStatus": 1 },
        { "createTime": "2020-12-07 17:04:47", "updateTime": "2022-03-30 11:17:20", "params": {}, "id": 2, "productTypeId": "普适型品类", "identifier": "dd_general", "name": "标准普适型设备", "isPublish": 1, "registerCode": "hNLHxfCp", "secret": "Mwj3htWJ", "key": "hNLHxfCp", "nodeType": "设备", "dataFormat": "其他", "protocolType": "mqtt", "imagePath": "", "remark": "", "autoOnline": 0, "manualStatus": 0 },
        { "createTime": "2020-11-30 16:48:28", "updateTime": "2022-03-30 11:17:21", "params": {}, "id": 3, "productTypeId": "普适型品类", "identifier": "L1_LF", "name": "普适型裂缝", "isPublish": 1, "registerCode": "G6XfgDgt", "secret": "42dJKndz", "key": "G6XjgDgg", "nodeType": "设备", "dataFormat": "json", "protocolType": "mqtt", "imagePath": "", "remark": "", "autoOnline": 0, "manualStatus": 0 },
        { "createTime": "2020-12-09 09:57:00", "updateTime": "2022-03-30 11:17:21", "params": {}, "id": 4, "productTypeId": "普适型品类", "identifier": "L1_QJ", "name": "普适型-倾角", "isPublish": 1, "registerCode": "y1Ep1LWZ", "secret": "F61xUr83", "key": "y1tp1LWe", "nodeType": "设备", "dataFormat": "其他", "protocolType": "mqtt", "imagePath": "", "remark": "", "autoOnline": 0, "manualStatus": 0 },
        { "createTime": "2020-12-09 16:36:21", "updateTime": "2022-03-30 11:17:21", "params": {}, "id": 5, "productTypeId": "普适型品类", "identifier": "L1_ZD", "name": "普适型-振动", "isPublish": 1, "registerCode": "sAzvzDre", "secret": "SOl6FOPZ", "key": "sAzvdDrd", "nodeType": "设备", "dataFormat": "其他", "protocolType": "mqtt", "imagePath": "", "remark": "", "autoOnline": 0, "manualStatus": 0 },
        { "createTime": "2020-12-10 09:30:22", "updateTime": "2022-03-30 11:17:21", "params": {}, "id": 6, "productTypeId": "普适型品类", "identifier": "L3_YL", "name": "普适型-雨量", "isPublish": 1, "registerCode": "8l8J8gqe", "secret": "j4edqmyD", "key": "8l8l8gqj", "nodeType": "设备", "dataFormat": "其他", "protocolType": "mqtt", "imagePath": "", "remark": "", "autoOnline": 0, "manualStatus": 0 },
        { "createTime": "2020-12-10 09:31:51", "updateTime": "2022-03-30 11:17:21", "params": {}, "id": 7, "productTypeId": "普适型品类", "identifier": "L3_QW", "name": "普适型-气温", "isPublish": 1, "registerCode": "3Fv0Af3b", "secret": "pMv7dWOJ", "key": "3Fv0af38", "nodeType": "设备", "dataFormat": "其他", "protocolType": "mqtt", "imagePath": "", "remark": "", "autoOnline": 0, "manualStatus": 0 },
        { "createTime": "2020-12-10 09:33:26", "updateTime": "2022-03-30 11:17:21", "params": {}, "id": 8, "productTypeId": "普适型品类", "identifier": "L3_QY", "name": "普适型-气压", "isPublish": 1, "registerCode": "iCQtPIfm", "secret": "rBGDqmut", "key": "iCQtyIf3", "nodeType": "设备", "dataFormat": "其他", "protocolType": "mqtt", "imagePath": "", "remark": "", "autoOnline": 0, "manualStatus": 0 },
        { "createTime": "2020-12-10 11:35:05", "updateTime": "2022-03-30 11:17:21", "params": {}, "id": 9, "productTypeId": "普适型品类", "identifier": "L4_LB", "name": "普适型-预警喇叭", "isPublish": 1, "registerCode": "HPxy7I0y", "secret": "dIEZMpj7", "key": "HPxy9I07", "nodeType": "设备", "dataFormat": "其他", "protocolType": "mqtt", "imagePath": "", "remark": "", "autoOnline": 0, "manualStatus": 0 },
        { "createTime": "2020-12-10 11:53:57", "updateTime": "2022-03-30 11:17:20", "params": {}, "id": 10, "productTypeId": "监测辅助设备", "identifier": "boardcast_kt", "name": "预警广播终端", "isPublish": 1, "registerCode": "mKVfQkqf", "secret": "1XzWedKL", "key": "mKVfqkqx", "nodeType": "其他", "dataFormat": "binary", "protocolType": "mqtt", "imagePath": "", "remark": "", "autoOnline": 1, "manualStatus": 1 }
    ],
    total: 10,
    queryParams:{
      pageNum: 1,
      pageSize: 10,
    },
    devTypeList:[
      {label: "未激活",value: "0"},
      {label: "在线",value: "1"},
      {label: "离线",value: "2"},
      {label: "已禁用",value: "3"},
      {label: "维护中",value: "4"},
      {label: "维护结束",value: "5"}
    ]
  }
},
methods:{
  getList(){}, 
}
}
</script>

<style scoped>
@import "~@/assets/styles/tablePage.scss";
.input_inner_selct{
  width: 100px;
}
</style>